<template>
	<view>
		<scroll-view  scroll-y="true" style="height: 1100upx;">
			<view class="d-flex flex-row flex-wrap answer_card_con py-2">
				<block v-if="chapterList && chapterList.length > 0">
				
					<view v-for="(item,index) in chapterList" :key="item.id">
						<view class="quest_type_title">
							<text>{{ (index+1) + '.' + item.title }}</text>
						</view>
						<view class="d-flex flex-row flex-wrap">
							<view v-for="(sitem,sindex) in item.answerList" :key="sitem.questionId" class="d-flex flex-column card_con_normal"
									:style="'background-color:' + (sitem.staffAnswer ? ( sitem.isRight == '1' ? '#a9feec' : '#ff9999' ) : '#efefef') 
											+';border:'+ (sitem.answerIndex == currentIndex ? '1px solid #bd2f19': '0px solid #dddddd') + ';'"
									 @click="selectItem(sitem.questionId, sitem.answerIndex)">
								<view style="height: 25upx;line-height: 25upx;text-align: right;margin-right:-5upx; margin-top:-10upx; ">
									<image v-show="sitem.favoriteFlag == '1' " src="../../static/icon/favorite.png" style="width: 30upx;height: 30upx;"></image>
								</view>
								<view class="card_item_answer">
									<text>{{ sitem.answerSubIndex+1 }}</text>
								</view>
							</view>
						</view>
						
					</view>
				</block>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"answer_card",
		props: ['chapterList', 'currentIndex'],
		data() {
			return {
				
			};
		},
		mounted() {
			console.log('currentIndex:' + this.currentIndex)
		},
		methods: {
			selectItem(questionId, index){
				console.log('index1:' + index)
				this.$emit("selectEvent", {questionId: questionId, index: index})
			}
		}
	}
</script>

<style>
	.answer_card_con{
		background-color: #ffffff;padding-left:20upx;padding-top:20upx;border:1px solid #d8d8d8;
	}
	
	.card_con_normal{
		width:72upx;height:72upx;margin:10upx;border: 1upx solid #797979;margin-top:20upx; border-radius: 36upx;
	}
	
	.quest_type_title{
		width:690upx;font-size: 30upx;font-weight: bold;color:#425ca1;
	}
	
	.card_item_answer{
		height: 50upx;line-height: 50upx;text-align: center;
	}

</style>